<template>
    <SCDialog
        class="mark-dialog"
        v-model="dialogVisible"
        :title="dialogTitle"
        :width="580"
        :append-to-body="true"
        :before-close="hideDialog"
    >
        <SCForm :model="form" label-position="top" ref="formRef" :rules="rules">
            <SCFormItem label="标注任务名称" prop="name">
                <SCInput v-model="form.name" clearable />
            </SCFormItem>
            <SCFormItem label="请选择数据集" prop="dataSetId">
                <SCSelect v-model="form.dataSetId" placeholder="" filterable clearable>
                    <SCOption
                        v-for="item in datasetOptions"
                        :label="item.label"
                        :value="item.value"
                        :key="item.value"
                    />
                </SCSelect>
            </SCFormItem>
        </SCForm>
        <template #footer>
            <span class="dialog-footer">
                <SCButton class="mr10" @click="hideDialog">取消</SCButton>
                <SCButton type="primary" @click="submit" :loading="submitLoading">提交</SCButton>
            </span>
        </template>
    </SCDialog>
</template>
<script setup lang="ts">
import { ref, computed, reactive, watch } from "vue";
import { SCMessage } from "@sribd/sc-ui";
import { getDatasetList } from "~/api/dataset";
import { createMarkTask, updateMarkTask } from "~/api/mark";
interface Option {
    value: number;
    label: string;
}
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Object,
        default: null,
    },
});
const emits = defineEmits(["refreshList", "hideDialog"]);
const dialogVisible = ref(false);
const submitLoading = ref(false);
const formRef = ref();
const form = reactive({
    name: "",
    dataSetId: "",
});
const rules = reactive({
    name: [
        {
            required: true,
            message: "请输入标注名称",
            trigger: "change",
        },
    ],
    dataSet: [
        {
            required: true,
            message: "请选择数据集",
            trigger: "change",
        },
    ],
});
const datasetLoading = ref(false);
const datasetOptions = ref<Option[]>([]);
const dialogTitle = computed(() => {
    return !!props.data ? "编辑标注任务" : "新增标注任务";
});
const hideDialog = () => {
    dialogVisible.value = false;
    emits("hideDialog");
    formRef.value?.resetFields();
};
const submit = async () => {
    await formRef.value?.validate();
    try {
        submitLoading.value = true;
        if (props.data?.id) {
            await updateMarkTask({
                name: form.name,
                dataSetId: form.dataSetId,
                id: props.data?.id,
            });
        } else {
            await createMarkTask({
                name: form.name,
                dataSetId: form.dataSetId,
            });
        }

        SCMessage({
            message: `${dialogTitle.value}成功!`,
            type: "success",
        });
        form.dataSetId = "";
        form.name = "";
        emits("refreshList");
        hideDialog();
    } catch (e) {
        SCMessage({
            message: e.msg || `${dialogTitle}失败!`,
            type: "error",
        });
    } finally {
        submitLoading.value = false;
    }
};
watch(
    () => props.visible,
    () => {
        dialogVisible.value = props.visible;
    },
);
watch(
    () => props.data,
    () => {
        if (props.data) {
            const { name, dataSetId } = props.data;
            form.name = name;
            form.dataSetId = dataSetId;
        }
    },
);
const queryDatasetOptions = async () => {
    try {
        datasetLoading.value = true;
        const list = await getDatasetList();
        datasetOptions.value = list.map((item) => ({
            value: item.id,
            label: `${item.name}(${item.size})`,
        }));
    } catch (e) {
        SCMessage({ message: e.msg || "获取数据集失败", type: "error" });
    } finally {
        datasetLoading.value = false;
    }
};
queryDatasetOptions();
</script>
<style lang="scss" scoped>
:deep(.sc-form-item) {
    display: block;
}
:deep(.sc-input) {
    width: 100%;
}
.sc-form {
    display: block;
}
</style>
